<template>
  <div class="front">
    <el-form
      class="login"
      ref="form"
      :model="form"
      leftlabel-width="120px"
      :rules="rules"
    >
      <el-form-item prop="name">
        <template slot="label">
          <span style="color: #000000"
            ><i class="el-icon-user"></i>用户名：</span
          >
        </template>
        <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <template slot="label">
          <span style="color: #000000"><i class="el-icon-edit"></i>密码：</span>
        </template>
        <el-input
          v-model="form.password"
          placeholder="请输入用户密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button type="warning" plain @click="signUp">注册</el-button>
      </el-form-item>
    <el-radio v-model="radio" label="1">资源提供方</el-radio>
    <el-radio v-model="radio" label="2">业务请求方</el-radio>
    </el-form>

    <el-dialog title="注册账户" :visible.sync="signUpShow" width="500px">
      <el-form :model="signInForm" ref="signInForm" :rules="rule_check">
        <el-form-item prop="name">
          <template slot="label">
            <span><i class="el-icon-user"></i>用戶名：</span>
          </template>
          <el-input
            v-model="signInForm.name"
            placeholder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <template slot="label">
            <span><i class="el-icon-edit"></i>密码：</span>
          </template>
          <el-input
            v-model="signInForm.password"
            placeholder="请输入用户密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="passwordCheck">
          <template slot="label">
            <span><i class="el-icon-edit"></i>确认密码：</span>
          </template>
          <el-input
            v-model="signInForm.passwordCheck"
            placeholder="请再次输入用户密码"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <div class="background">
      <img :src="imgSrc_bd" width="100%" height="100%" alt="" />
    </div>
    <div class="loginbg">
      <img :src="imgSrc_loginbg" width="100%" height="100%" alt="" />
    </div>
    <div class="title">
      <span>边缘计算资源管理平台</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户密码"));
      } else {
        if (this.signInForm.password !== "") {
          this.$refs.signInForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.signInForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      radio: "1",
      metamaskAddr: "",
      ethAddrsList: [],
      imgSrc_bd: require("../assets/background.jpeg"),
      imgSrc_loginbg: require("../assets/loginbg.jpeg"),
      signUpShow: false,
      signInForm: {
        name: "",
        address: "",
        password: "",
        passwordCheck: "",
      },
      form: {
        name: "",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      rule_check: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [
          { validator: validatePass, trigger: "blur", required: true },
        ],
        passwordCheck: [
          { validator: validatePass2, trigger: "blur", required: true },
        ],
      },
    };
  },
  methods: {
    //登录
    onSubmit() {
 if (this.radio === "1") {
       this.$router.push({
            path: "/source",
            query: { username: this.form.name },
          });
    } else {
       this.$router.push({
            path: "/user",
            query: { username: this.form.name },
          });
    }
    },
    signUp() {
      this.signInForm.name = "";
      this.signInForm.password = "";
      this.signUpShow = true;
    },
    handleCancel() {
      this.signUpShow = false;
    },
    //注册的确认按钮
    handleConfirm() {
      this.$refs["signInForm"].validate((valid) => {
      // eslint-disable-next-line space-before-blocks
      if (valid){
      this.GLOBAL.web3.eth.getAccounts().then((res) => {
        this.metamaskAddr = res[0];
        this.GLOBAL.contract.methods
          .createUser(this.signInForm.name, this.signInForm.password)
          .send({ from: this.metamaskAddr });
        this.signUpShow = false;
      });
} else {
            this.$message.error("请正确输入！")
            return false;
}
      }
      )
    },
  },
};
</script>
<style>
.background {
  left: 0;
  top: 0;
  width: 70%;
  height: 100%;
  z-index: -1;
  position: absolute;
}
</style>
<style>
.loginbg {
  left: 70%;
  top: 0;
  width: 30%;
  height: 100%;
  z-index: -1;
  position: absolute;
}
</style>
<style>
.login {
  left: 75%;
  top: 20%;
  position: absolute;
  width: 20%;
  height: 100;
}
</style>
<style>
.title {
  left: 77%;
  top: 10%;
  position: absolute;
  font-size: 28px;
  color: tomato;
  font-family: "Microsoft YaHei";
}
</style>
